<!-- 方艺 2017.09.15 -->
<!DOCTYPE html>
<html lang="en" xmlns:margin-bottom="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>user_register</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.3/demo/demo.css">
    <link rel="stylesheet" type="text/css" href="css/user_register.css">
    <script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/user_register.js"></script>
    <script type="text/javascript" src="js/usericon.js"></script>
</head>
<body>
<div class="show" >
<div class="easyui-panel" title="用户注册" style="width:100%;max-width:800px;padding:20px 150px;">

    <form id="ff" method="post" action="User/addUser">
        <div >
            <p>登录信息：</p>
        </div>
        <div style="margin-left: 80px">
        <div style="margin-bottom:20px" >
            <input class="easyui-textbox" id="loginname" name="loginname" style="width:70%" missingmessage="请输入用户名" data-options="label:'用户名:',required:'true',validType:['namea','minLength[6]','maxLength[20]']" >
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-passwordbox" id="pwd" name="password"  iconWidth="28" style="width:70%" label="密码:" missingmessage="请输入密码" required="required" data-options="validType:['minLength[6]','pwda','pwdb','pwdc','maxLength[20]']">
        </div>
        <div style="margin-bottom:40px">
            <input class="easyui-passwordbox" id="rpwd" name="rpassword"  iconWidth="28" style="width:70%" label="确认密码:" missingmessage="请输入确认密码" required="required" validType="equals['#pwd']">
        </div>
        </div>
        <div style="margin-bottom: 20px;">
            <p>详细信息：</p>
        </div>
        <div style="margin-left: 80px">
            <div style="margin-bottom:20px">
                <img id="userIcon" class="user-icon" src="images/icon.jpg" style="width : 200px;
			height : 200px">
                <input type="hidden" id="icon" name="icon">
            </div>
            <div style="margin-bottom:20px" >
                <input class="easyui-textbox" name="realname" style="width:70%" missingmessage="请输入您的真实姓名" data-options="label:'真实姓名:',required:true,validType:'chinese'">
            </div>

            <div style="margin-bottom: 20px">
                性别：<input class="easyui_validatebox" type="radio" name="sex" value="man" style="margin-left: 80px">男
                <input type="radio" class="easyui_validatebox" name="sex" value="woman" style="margin-left: 50px">女
            </div>
            <div style="margin-bottom: 20px">
                省份市县：<select  name="prov" id="prov" style="width:30%;padding:2px;margin-left: 25px;"  onchange="onSelectChanged()">
                    <option value="0">------请选择-----</option>
                    <option value="1">北京市</option>
                    <option value="2">上海市</option>
                    <option value="3">天津市</option>
                    <option value="4">重庆市</option>
                    <option value="5">河北省</option>
                    <option value="6">山西省</option>
                    <option value="7">内蒙古自治区</option>
                    <option value="8">辽宁省</option>
                    <option value="9">吉林省</option>
                    <option value="10">黑龙江省</option>
                    <option value="11">江苏省</option>
                    <option value="12">浙江省</option>
                    <option value="13">安徽省</option>
                    <option value="14">福建省</option>
                    <option value="15">江西省</option>
                    <option value="16">山东省</option>
                    <option value="17">河南省</option>
                    <option value="18">湖北省</option>
                    <option value="19">湖南省</option>
                    <option value="21">广东省</option>
                    <option value="21">广西自治区</option>
                    <option value="22">海南省</option>
                    <option value="23">四川省</option>
                    <option value="24">贵州省</option>
                    <option value="25">云南省</option>
                    <option value="26">西藏自治区</option>
                    <option value="27">陕西省</option>
                    <option value="28">甘肃省</option>
                    <option value="29">宁夏自治区</option>
                    <option value="30">青海省</option>
                    <option value="31">新疆自治区</option>
                    <option value="32">香港特别行政区</option>
                    <option value="33">澳门特别行政区</option>
                    <option value="34">台湾省</option>
                </select>
                <select  name="city" id="city" style="width:30%;padding:2px;margin-left: 2px;"  >
                    <option>------请选择------</option>
                </select>
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="cardtype" label="证件类型:" style="width:70%" data-options="required:true">
                    <option value="居民二代身份证">居民二代身份证</option>
                    <option value="学生证">学生证</option>
                    <option value="残疾证">残疾证</option></select>
            </div>
            <div style="margin-bottom:20px" >
                <input class="easyui-textbox" name="cardid" style="width:70%" missingmessage="请输入您的身份证号码" data-options="label:'证件号码:',required:true,validType:'cardid'">
            </div>
            <div style="margin-bottom:20px" >
                <input class="easyui-textbox" name="tel" style="width:70%" missingmessage="请输入您的手机号码" data-options="label:'手机号码:',required:true,validType:'phone'">
            </div>
            <div style="margin-bottom: 30px">
                <select class="easyui-combobox" name="utype" label="旅客类型:" style="width:70%" data-options="required:true">
                    <option value="成年人">成年人</option>
                    <option value="老年人">老年人</option>
                    <option value="儿童">儿童</option></select>
            </div>
            <div style="margin-bottom:0; float: left;" id="beizhu" >
                 <p>备注：</p>
            </div>
            <div>
                <textarea style="margin-left: 50px; float: left" id="text_area" name="beizhu"></textarea>
            </div>
            <div style="clear: left;padding-top: 30px">
                <input   type="checkbox" id="check" name="resumeFilter">我已阅读并同意遵守<a href="#">《中国铁路客户服务中心网站服务条款》</a>
            </div>
        </div>

    <div style="text-align:center;padding-top:50px;padding-bottom: 20px;clear: left;">
        <a href="javascript:void(0)" id="submit" class="easyui-linkbutton" onclick="submitForm()" style="width:80px" >提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px;margin-left: 50px">重置</a>
    </div>
    </form>
    <iframe id="uploader" hidden>
    </iframe>
</div>
<script>
    function submitForm(){
        var check=document.getElementById("check");
//        $('#ff').form('submit',{
//            onSubmit:function(){
//                var check=document.getElementById("check");
//                return check.checked&&$(this).form('enableValidation').form('validate');
//            }});
        if( check.checked&&$('#ff').form('enableValidation').form('validate'))
        {
            $('#ff').submit();
        }
    }
    function clearForm(){
        $('#ff').form('clear');
    }
</script>
</div>
<script type="text/javascript">
    function onSelectChanged(){
        var arr =[[],["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆"],
            ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"],
            ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县"],
            ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川","南川"],
            ["石家庄","邯郸","邢台","保定","张家口","承德","廊坊","唐山","秦皇岛","沧州","衡水"],
            ["太原","大同","阳泉","长治","晋城","朔州","吕梁","忻州","晋中","临汾","运城"],
            ["呼和浩特","包头","乌海","赤峰","呼伦贝尔盟","阿拉善盟","哲里木盟","兴安盟","乌兰察布盟","锡林郭勒盟","巴彦淖尔盟","伊克昭盟"],
            ["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],
            ["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],
            ["哈尔滨","齐齐哈尔","牡丹江","佳木斯","大庆","绥化","鹤岗","鸡西","黑河","双鸭山","伊春","七台河","大兴安岭"],
            ["南京","镇江","苏州","南通","扬州","盐城","徐州","连云港","常州","无锡","宿迁","泰州","淮安"],
            ["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],
            ["合肥","芜湖","蚌埠","马鞍山","淮北","铜陵","安庆","黄山","滁州","宿州","池州","淮南","巢湖","阜阳","六安","宣城","亳州"],
            ["福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德"],
            ["南昌市","景德镇","九江","鹰潭","萍乡","新馀","赣州","吉安","宜春","抚州","上饶"],
            ["济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁","泰安","威海","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],
            ["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店","济源"],
            ["武汉","宜昌","荆州","襄樊","黄石","荆门","黄冈","十堰","恩施","潜江","天门","仙桃","随州","咸宁","孝感","鄂州"],
            ["长沙","常德","株洲","湘潭","衡阳","岳阳","邵阳","益阳","娄底","怀化","郴州","永州","湘西","张家界"],
            ["广州","深圳","珠海","汕头","东莞","中山","佛山","韶关","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","河源","阳江","清远","潮州","揭阳","云浮"],
            ["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","南宁地区","柳州地区","贺州","百色","河池"],
            ["海口","三亚"],
            ["成都","绵阳","德阳","自贡","攀枝花","广元","内江","乐山","南充","宜宾","广安","达川","雅安","眉山","甘孜","凉山","泸州"],
            ["贵阳","六盘水","遵义","安顺","铜仁","黔西南","毕节","黔东南","黔南"],
            ["昆明","大理","曲靖","玉溪","昭通","楚雄","红河","文山","思茅","西双版纳","保山","德宏","丽江","怒江","迪庆","临沧"],
            ["拉萨","日喀则","山南","林芝","昌都","阿里","那曲"],
            ["西安","宝鸡","咸阳","铜川","渭南","延安","榆林","汉中","安康","商洛"],
            ["兰州","嘉峪关","金昌","白银","天水","酒泉","张掖","武威","定西","陇南","平凉","庆阳","临夏","甘南"],
            ["银川","石嘴山","吴忠","固原"],
            ["西宁","海东","海南","海北","黄南","玉树","果洛","海西"],
            ["乌鲁木齐","石河子","克拉玛依","伊犁","巴音郭勒","昌吉","克孜勒苏柯尔克孜","博尔塔拉","吐鲁番","哈密","喀什","和田","阿克苏"],
            ["香港"],
            ["澳门"],
            ["台北","高雄","台中","台南","屏东","南投","云林","新竹","彰化","苗栗","嘉义","花莲","桃园","宜兰","基隆","台东","金门","马祖","澎湖"]];
        var indexer = 0;
        var prov = document.getElementById('prov');
        var prov_options = prov.children;
        for (var i = 0; i < prov_options.length; i++) {
            var option = prov_options[i];

            if (option.selected) {
                var value = option.value;
                indexer = parseInt(value);
                break;
            }
        }
        var city = arr[indexer];
        var html = "";
        for (var i = 0; i < city.length; i++) {
            var values = city[i];
            var option_html = "<option>" + values + "</option>";
            html = html + option_html;
        }
        var city_select = document.getElementById('city');
        city_select.innerHTML = html;

    }
</script>
</body>
</html>